<template>
	<view class="" style="height: 100%">
		<scroll-view scroll-y="true" class="scroll-Y" :refresher-triggered="triggered" refresher-background="#f4f7f8"
			:refresher-threshold="100" @scrolltolower="onPulling" refresher-enabled="true" @refresherrefresh="onRefresh"
			refresher-default-style="black">
			<view class="carditem" v-for="(item, key) in list" :key="key" @click="itemtap(item)">
				<view class="ddh u-flex u-flex-between">
					<view class="u-line-1" style="flex: 1;">{{$z.$t("订单编号")}}：{{ item.ddh }}</view>
					<u-button type="primary" v-if="item.b_zf == 1" text="已完成" style="width: auto; margin: 0"
						size="mini"></u-button>
					<u-button type="error" v-else text="未支付" style="width: auto; margin: 0" size="mini"></u-button>
				</view>
				<view class="sj u-flex u-flex-start">
					<view>{{$z.$t("占位时间")}}：</view>
					<view>{{item.sjs}}</view>

				</view>
				<view class="sj u-flex u-flex-start">
					<view>{{$z.$t("站点名称")}}：</view>
					<view>{{ item.pcsmc }}</view>
				</view>
				<view class="sj u-flex u-flex-start">
					<view>{{$z.$t("占位费")}}：</view>
					<view>{{item.je == 0 ? 0 : item.je / 100}}元</view>
				</view>
			</view>
			<u-loadmore :status="status" marginBottom="30" />

		</scroll-view>
	</view>
</template>

<script>
	import qs from "qs"
	export default {
		components: {},
		props: {
			seardata: {
				typeof: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				status: "loadmore",
				triggered: false,
				list: [],
				chargeTimes: {}, // 用于存储充电时间
				ddh: '' //充电的ddh订单号
			};
		},
		computed: {
			reqdata() {
				let r = {
					sjs: `${this.$z.timefn.gettime(360)} 00:00:00`,
					sje: `${this.$z.timefn.gettime("-1")} 00:00:00`,
				};
				r.csta = this.list.length;
				r.cmax = 10;
				// r.uUser = this.$store.state.user.USearch.uUser
				// sjs	输入	开始时间;格式 YYYY-MM-DD HH-MM-SS
				// sje	输入	结束时间;格式 YYYY-MM-DD HH-MM-SS
				return r;
			},
		},
		mounted() {
			console.log(1541541);
		},
		methods: {
			async fetchChargeTimes() {
				for (const item of this.list) {
					if (item.b_zf == 0) {
						const chargeTime = await this.searchChargeTime(item);
						this.$set(this.chargeTimes, item.ddh, chargeTime);
					}
				}
			},
			async searchChargeTime(val) {
				let ChargeUserDsToUser = await this.$z.request("/ChargeUserDsToUser", {
					ddhds: val.ddh
				});
				if (ChargeUserDsToUser.length > 0) {
					let GetRfCD = await this.$z.request("/GetRfCD", {
						ddh: ChargeUserDsToUser[0].ddh
					});
					if (GetRfCD.length > 0) {
						return GetRfCD[0].sjcds;
					} else {
						return '-';
					}
				}
			},
			async onPulling() {
				if (this.status == "loading") {
					return;
				}
				this.status = "loading";
				await this.getdata()
			},
			async onRefresh() {
				if (this.status == "loading") {
					return;
				}
				this.status = "loading";
				console.log("onRefresh");
				this.triggered = true;
				this.list = [];

				await this.getdata()
				this.triggered = false;
			},
			async getdata() {
				let reqdata = {
					...this.reqdata
				}
				let ChargeUserDs = await this.$z.request("/ChargeUserDs", reqdata);
				this.list = this.list.concat(ChargeUserDs);
				this.status =
					ChargeUserDs.length >= this.reqdata.cmax ? "loadmore" : "nomore";
				await this.fetchChargeTimes(); // 获取充电时间
			},
			itemtap(item) {
				console.log('item', item);
				uni.navigateTo({
					url: `/pages/order/components/components/placeholderOrderInfo?ddh=${item.ddh}`
				})
			},
		},
	};
</script>

<style lang="scss">
	.scroll-Y {
		height: 100%;
	}

	.carditem {
		background: #fff;
		margin: 30rpx;
		border-radius: 10rpx;

		.ddh {
			height: 100rpx;
			font-size: 30rpx;
			// position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.sj {
			height: 80rpx;
			font-size: 28rpx;
			// position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.je {
			height: 120rpx;
			justify-content: flex-end;
			padding: 0 30rpx;
			font-size: 24rpx;

			.text {
				font-size: 36rpx;
				font-weight: bold;
				color: #2093f5;
			}
		}
	}
</style>